<div class="rolltable-header" style="background-color: #fff">
  <div class="rolltable-header-name" style="text-align: left; width: 160px; padding: 6px 0"> 产品名称 </div>
  <div #headerDetail class="rolltable-header-detail">
    <div class="rolltable-header-detail-container" [style.width]="'720px'">
      <span class="rolltable-header-col"> 认申购(万) </span>
      <span class="rolltable-header-col">当前保有(万)</span>
      <span class="rolltable-header-col">赎回(万)</span>
      <span class="rolltable-header-col">成立日期</span>
      <span class="rolltable-header-col">募集开始</span>
      <span class="rolltable-header-col">募集结束</span>
    </div>
  </div>
</div>

<div class="rolltable-list">
  <div class="rolltable-name-list" style="width: 160px">
    <div class="rolltable-name-row" *ngFor="let item of salesRankingInfoList; trackBy: trackSalesRankingDetailList">
      <div class="rolltable-name-col--single border--bottom" style="height: 65px; padding: 0">
        <dl class="introduce-info" style="text-align: left">
          <dt>{{ item.text1 }}</dt>
          <dd>{{ item.text2 }}</dd>
        </dl>
      </div>
    </div>
  </div>
  <div class="rolltable-detail-list" #detaillList>
    <a
      class="rolltable-detail-row"
      *ngFor="let item of salesRankingInfoList; trackBy: trackSalesRankingDetailList"
      [style.width]="'720px'"
    >
      <span class="rolltable-detail-col border--bottom" [style.height]="'65px'">
        {{ item.text3 }}
      </span>
      <span class="rolltable-detail-col border--bottom" [style.height]="'65px'">
        {{ item.text4 }}
      </span>
      <span class="rolltable-detail-col border--bottom" [style.height]="'65px'">
        {{ item.text5 }}
      </span>
      <span class="rolltable-detail-col border--bottom" [style.height]="'65px'">
        {{ item.text6 }}
      </span>
      <span class="rolltable-detail-col border--bottom" [style.height]="'65px'"> {{ item.text7 }}亿 </span>
      <span class="rolltable-detail-col border--bottom" [style.height]="'65px'"> {{ item.text7 }}亿 </span>
    </a>
  </div>
</div>

<bs-table-emotion
  [bsTableLength]="salesRankingInfoList?.length"
  [bsUrl]="salesRankingInfoList && salesRankingInfoList.length > 5 ? detailUrl : ''"
></bs-table-emotion>

<ion-infinite-scroll
  *ngIf="
    !isLocal &&
    salesRankingInfoList?.length !== undefined &&
    salesRankingInfoList &&
    salesRankingInfoList.length >= 10 &&
    salesRankingInfoList?.length !== salesRankingTotal
  "
  threshold="100px"
  (ionInfinite)="getSalesRankingInfoList($event)"
>
  <ion-infinite-scroll-content loadingSpinner="dots" loadingText="正在载入，请稍等"> </ion-infinite-scroll-content>
</ion-infinite-scroll>
